<template>
	<view class="bandangs">
		<view class="head">
		    <view class="head1">智选榜单</view>
		    <view class="head2">查看更多</view>
		</view>
		<view class="conter">
			<view class="conters">
				<view class="conters1 img">
					<view>技术</view>
					<view>排行榜</view>
				</view>
				<view class="conters1 text">
					<view  style="color: #ff4658; font-size: 36rpx; font-weight: 700;">2.963%</view>
					<view style="color: #cdcdcd; font-size: 22rpx;">七年年化率</view>
				</view>
				<view class="conters1 bottm text">
					<view style="color: #333333; font-size: 28rpx;">富国高薪产业</view>
					<view style="color: #cdcdcd; font-size: 22rpx; margin-top: 13rpx;" >100060
					<image src="../../static/iamges/R.png" style="width: 30rpx; height: 30rpx; margin-left: 60rpx;" mode=""></image>
					</view>
				</view>
			</view>
			<view class="conters">
				<view class="conters1 img">
					<view>货币</view>
					<view>基金榜</view>
				</view>
				<view class="conters1 text">
					<view  style="color: #ff4658; font-size: 36rpx; font-weight: 700;">2.963%</view>
					<view style="color: #cdcdcd; font-size: 22rpx;">七年年化率</view>
				</view>
				<view class="conters1 bottm text">
					<view style="color: #333333; font-size: 28rpx;">富国高薪产业</view>
					<view style="color: #cdcdcd; font-size: 22rpx; margin-top: 13rpx;" >100060
					<image src="../../static/iamges/F.png" style="width: 30rpx; height: 30rpx; margin-left: 60rpx;" mode=""></image>
					</view>
				</view>
			</view>
			<view class="conters">
				<view class="conters1 img">
					<view>养老</view>
					<view>主题榜</view>
				</view>
				<view class="conters1 text">
					<view  style="color: #ff4658; font-size: 36rpx; font-weight: 700;">2.963%</view>
					<view style="color: #cdcdcd; font-size: 22rpx;">七年年化率</view>
				</view>
				<view class="conters1 bottm text">
					<view style="color: #333333; font-size: 28rpx;">富国高薪产业</view>
					<view style="color: #cdcdcd; font-size: 22rpx; margin-top: 13rpx;" >100060
					<image src="../../static/iamges/R.png" style="width: 30rpx; height: 30rpx; margin-left: 60rpx;" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"bangdna",
		data() {
			return {
				datalist:[
					{id:1,text1:'2.963%',text2:"七年年化率",text3:'富国高薪产业',text4:'100060',url:'../../static/iamges/R.png'},
					{id:1,text1:'2.963%',text2:"七年年化率",text3:'富国高薪产业',text4:'100060',url:'../../static/iamges/R.png'}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
.bandangs{
	
	.head {
	    display: flex;
	    justify-content: space-between;
	    margin-bottom: 24rpx;
		
	    .head1 {
	        font-size: 36rpx;
	        color: #333333;
			font-weight: 700;
	    }
	    .head2 {
	        font-size: 24rpx;
	        color: #999999;
	        padding-top: 5rpx;
	        box-sizing: border-box;
	    }
		}
		.conter{
		border-radius: 15rpx;
		height: 459rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		.conters{
			height: 33.33%;
			width: 100%;
			
			display: flex;
		.bottm{
			text-align: right !important;
		}	
		.conters1{
			width: 33.33%;
			height: 100%;
			
			flex-direction: column;
			display: flex;
			box-sizing: border-box;
			
			text-align:left !important; 
		}
		.text{
			padding-top: 30rpx;
			padding-left: 30rpx;
		}
		.img{
			 background: no-repeat;
			background-image: url(../../static/iamges/bangdan123.png);
			background-size: 60%  ;
			background-position: 45rpx 6rpx;
			color: #ff632c;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
			align-items: center;
		}
			
		}
		}
}
</style>
